<script setup>
import { onMounted, ref, markRaw } from 'vue'
import Header from '@/views/content/util/header.vue'
import { ElButton, ElTableColumn, ElTable, ElLink, ElTabs, ElTabPane, ElInput, ElSelect, ElOption, ElMessage, } from 'element-plus'
import DateScopeSelect from '@/views/content/util/date/dateScopeSelect.vue'
import Limit from '@/views/content/util/limit.vue'


const storeListName = ref([{ name: '浆·小白' }])
const selectStore = ref('浆·小白')

const tabPositionOrderByDateScope=ref("全部")//下单日期
const selectHandle = () => {

}

</script>

<template>
    <div class="content-dealRecord">
        <div>
            <Header title="店铺账单"></Header>
        </div>
        <div class="select-grop">
            <div class="store-select">
                <div>选择店铺： </div>
                <el-select v-model="selectStore" @change="selectHandle" placeholder="请选择店铺">
                    <el-option v-for="item in storeListName" :label=item.name :value=item.name />
                </el-select>
            </div>

            <div class="screen">
                <div>查询日期： </div>
                <el-radio-group v-model="tabPositionOrderByDateScope" class="button-grop">
                    <el-radio-button label="全部">全部</el-radio-button>
                    <el-radio-button label="今天">今天</el-radio-button>
                    <el-radio-button label="近七天">近七天</el-radio-button>
                    <el-radio-button label="近十五天">近十五天</el-radio-button>
                    <el-radio-button label="近三十天">近三十天</el-radio-button>
                    <el-radio-button label="具体日期">自定义</el-radio-button>
                </el-radio-group>
                <div>
                   
                    <DateScopeSelect></DateScopeSelect>
                </div>
            </div>

            <div class="order-list">
                <el-table style="width: 98%;" 
                :header-cell-style="{ background: 'rgb(243, 243, 243)', color: '#606266' }"
                >
                    <el-table-column label="日期"></el-table-column>
                    <el-table-column label="有效订单数"></el-table-column>
                    <el-table-column label="营业总额"></el-table-column>
                    <el-table-column label="平台服务费"></el-table-column>
                    <el-table-column label="预计收入"></el-table-column>
                    
                    <el-table-column label="操作"></el-table-column>
                </el-table>
                <Limit></Limit>
            </div>
        </div>

    </div>
</template>



<style  scoped>
::v-deep .el-table th>.cell {
    color: black;
}
.content-dealRecord{
}
.select-grop{
    margin-left: 20px;
}
.store-select {
   
    display: flex;
    align-items: center;
    /* justify-content: center; */
}

.screen {

    display: flex;
    align-items: center;
    margin-top: 10px;
}
.button-grop{
   
}
.order-list{
    margin-top: 20px;
}
</style>